<template>
    <view>
        <view class="top-view">
            <view>
                <u-icon name="clock"></u-icon>
                <text class='u-m-l-20'>等待付款</text>
            </view>
            <view class="u-m-t-30 u-flex">
                剩余
                <u-count-down v-if="timestamp" :timestamp="timestamp" separator="zh" class="u-m-x-20" bg-color="#fb6e8b"
                    color="white" separator-color="white" @end="timeEnd"></u-count-down>
                将自动取消
            </view>
        </view>
        <view class="order-list">
            <order-collapse-item :list="list" :check="false"></order-collapse-item>
        </view>
        <holder height="111px" class="safe-area-inset-bottom"/>
        <view class="info-bar safe-area-inset-bottom">
            <view class="u-flex u-row-between u-m-40">
                <text class=''>合计订单金额</text>
                <text class='o-font-color-price'>￥{{Number(billPrice).toFixed(2)}}</text>
            </view>
            <view class="u-flex">
                <view class="u-flex-1 btn-cancel" @click="spliteMergedOrder">取消支付</view>
                <view class="u-flex-3 btn-confimr" @click="mergePay">合并支付</view>
            </view>
        </view>
        <u-modal v-model="show" cancel-text="确认取消" confirm-text="继续支付" title="" confirm-color="#fc4f75"
            show-cancel-button @confirm="confirm" @cancel="cancel">
            <view class="u-text-center u-m-30">
                <rich-text :nodes="content"></rich-text>
            </view>
        </u-modal>
    </view>
</template>

<script lang="ts" setup>
import { onLoad, onReady } from '@dcloudio/uni-app';
import { ref } from 'vue';

const timestamp = ref<undefined|number>(undefined)

const list = ref([])

const billPrice = ref(0)

const show = ref(false)

const code = ref('')

const addTime = ref('')

const content = `您正在操作取消付款单,<br>
                    确认取消吗？`

const timeEnd = () => {
    timestamp.value = 0
}

const spliteMergedOrder = () => {
    show.value = true
}

const mergePay = () => {
    let para = JSON.stringify({
        id: code.value,
        totalPrice: billPrice.value,
        addTime: addTime.value,
        overtime: 24,
        type: undefined,
        isMergePay: true
    })
    // 跳转收银台
    uni.$u.$MRouter.checkstand.to({para}, 'redirectTo')
}

const confirm = () => {
    show.value = false
}

const cancel = () => {
    uni.$u.$api.OrderApi.revocationMergeOrder({ code: code.value }).then((res: any) => {
        if (res) {
            uni.$u.toast('已取消支付，付款单取消成功')
            setTimeout(() => {
                uni.navigateBack()
            }, 1500)
        }
    })
}

onLoad((params: any)=>{
    code.value = params.code
})

onReady(()=>{
    uni.$u.$api.OrderApi.queryMergeOrderInfo({ code: code.value }).then((res: any) => {
        // 订单提交的时间 往后退24小时
        let expire = new Date(res.addTime).getTime() + 60 * 60 * 24 * 1000
        timestamp.value = (expire - new Date().getTime()) / 1000
        billPrice.value = res.billPrice
        // this.list = res.details
        addTime.value = res.addTime
        res.orderList.forEach((item: any)=>{
            item.open = false
            item.uuid = uni.$u.guid(8)
            let sub: any[] = []
            let count = 0
            item.skus.forEach((m: any)=>{
                let child: any[] = [];
                let sum = 0;
                let subTotalPrice = 0; // 每个款色码的价格小计
                m.sku.forEach((it: any)=>{
                    it.price = it.singlePrice;
                    child.push(it);
                    sum += it.num;
                })
                sub.push({
                    name: m.name,
                    picId: m.picId,
                    list: child,
                    num: sum,
                    total: child.map((m) => m.totalPrice).reduce((p,c)=>p+c,0),
                    uuid: uni.$u.guid(6),
                });
                count += sum;
            })
            item.picId = item.skus[0].picId;
            item.totalNum = count;
            // item.orderType = this.orderType;
            item.skus = sub;
        })
        list.value = res.orderList
    })
})

</script>

<style scoped lang="scss">
    page{
        background-color: #f8f8f8;
    }
.top-view {
        background-image: url(@/static/images/merge-bg.png);
        background-size: 100% 170rpx;
        width: 100%;
        height: 170rpx;
        padding: 30rpx 50rpx;
        color: white;
    }

    .info-bar {
        position: fixed;
        left: 0;
        bottom: 0;
        background-color: white;
        z-index: 9;
        width: 100vw;
    }

    .biger-letter {
        letter-spacing: 4rpx;
    }

    .btn-confimr,
    .btn-cancel {
        font-size: 32rpx;
        text-align: center;
        height: 100rpx;
        line-height: 100rpx;
    }

    .btn-confimr {
        background-color: #fd4e77;
        color: white;
    }

    .btn-cancel {
        background-color: #e9e6ea;
    }

    .order-list {
        padding: 20rpx;

        .order-wrap {
            padding: 20rpx;
            background-color: white;
            margin-bottom: 20rpx;
            border-radius: 10rpx;

            .title {
                line-height: 60rpx;
            }

            .goods-name {
                margin-left: 20rpx;
                padding-top: 10rpx;
            }
        }
    }
</style>
